<template>
    <view class="nova-column">
        <image class="banner" src="../../static/jn/jn_head.png"></image>
        <view class="nova-column" style="padding: 34rpx;">
            <view class="nova-column publish" v-if="job">
                <view class="border-bottom nova-row-center">
                    <text class="job">{{ job.title }}</text>
                    <text style="color: #666; font-size: 24rpx;">请选择阿姨会的服务技能</text>
                </view>
                <view v-if="job" v-for="(item, index) in job.items" :key="index" class="nova-column">
                    <text class="title">{{ item.title }}</text>
                    <nova-grid
                        v-if="item.type === 'radio' || item.type === 'checkbox'"
                        class="grid"
                        :column="3"
                        :hspace="40"
                        :vspace="30"
                        :ratio="0"
                        :choiceMode="item.type === 'radio' ? 1 : -1"
                        :checkedIndices="item.choiceIndices"
                        :highlight="false"
                        :name="item.key"
                        @change="change"
                    >
                        <nova-grid-item v-for="(sub, idx) in item.options" :key="idx" :itemIndex="idx">
                            <view class="option" :class="{ checked: item.value.split(',').indexOf(sub) >= 0 }">{{ sub }}</view>
                        </nova-grid-item>
                    </nova-grid>
                    <view v-if="item.type === 'text'" class="nova-row-center grid"><input class="option" :placeholder="item.placeholder" v-model="item.value" /></view>
                    <view v-if="item.type === 'range'" class="nova-row-center grid">
                        <input class="option" :type="item.customtype || 'number'" v-model="item.min" :data-i="index" />
                        <text style="padding: 0 20rpx;">-</text>
                        <input class="option" :type="item.customtype || 'number'" v-model="item.max" :data-i="index" />
                        <text>{{ item.customunit }}</text>
                    </view>
                </view>
                <view class="nova-row-center" style="height: 96rpx;">
                    <text>期望工作地点</text>
                    <text style="flex: 1;"></text>
                    <picker class="picker" mode="selector" @change="changeArea" :range="areas" range-key="name" :value="areaIndex">
                        <text v-if="form.area">{{ form.area }}</text>
                        <text v-else class="placeholder">请选择地区</text>
                    </picker>
                    <text class="text-arrow"></text>
                </view>
                <!--                <text class="title">关于{{ job.title }}阿姨还有什么备注要求</text>
                <textarea class="ta" placeholder="如果有具体要求，请填写要求内容" v-model="form.remarks"></textarea> -->
            </view>
            <!-- 业主分享阿姨 -->
            <view class="nova-column publish" v-if="job && role == 2" style="margin-top: 36rpx;">
                <nova-pref
                    class="li-pref"
                    title="阿姨姓名"
                    placeholder="请输入真实姓名"
                    :arrow="true"
                    name="userName"
                    :value="form.userName"
                    type="input"
                    inputType="text"
                    @input="input"
                ></nova-pref>
                <nova-pref class="li-pref" title="阿姨性别" placeholder="请选择性别" :arrow="true">
                    <radio-group @change="changeSex">
                        <label>
                            <radio value="女" class="" :checked="form.sex == '女'"></radio>
                            女
                        </label>
                        <label>
                            <radio value="男" :checked="form.sex == '男'"></radio>
                            男
                        </label>
                    </radio-group>
                </nova-pref>
                <nova-pref
                    class="li-pref"
                    title="出生日期"
                    placeholder="请选择出生日期"
                    type="picker"
                    pickerMode="date"
                    :value="form.birthday"
                    name="birthday"
                    @change="changePicker"
                    :arrow="true"
                ></nova-pref>
                <nova-pref
                    class="li-pref"
                    title="阿姨年龄"
                    placeholder="请输入"
                    :arrow="true"
                    name="age"
                    :value="form.age"
                    type="input"
                    inputType="number"
                    @input="input"
                ></nova-pref>
                <nova-pref class="li-pref" title="阿姨籍贯" placeholder="" :arrow="true">
                    <picker class="picker" mode="selector" :value="places.indexOf(form.place) >= 0 ? places.indexOf(form.place) : ''" @change="changeJG" :range="places">
                        <text v-if="form.place">{{ form.place }}</text>
                        <text v-else class="placeholder">请选择您的籍贯</text>
                    </picker>
                </nova-pref>
                <nova-pref
                    class="li-pref"
                    title="联系方式"
                    placeholder="请填写联系方式"
                    :arrow="true"
                    name="userPhone"
                    type="input"
                    inputType="number"
                    :value="form.userPhone"
                    @input="input"
                ></nova-pref>
                <!--                <nova-pref class="li-pref" title="当前住址" placeholder="请选择当前住址" :value="form.village" :arrow="true" @click.native="goMap"></nova-pref> -->
                <choose-location class="li-pref" title="当前住址" placeholder="请选择当前住址" :loc="loc" :value="form.village" @change="goMap" />
                <nova-pref class="li-pref" title="月工资待遇" placeholder="">
                    <view class="nova-row-center">
                        <view class="" style="flex: 1;"></view>
                        <input class="money" type="number" v-model="form.userWagesLow" />
                        <text style="padding: 8rpx; color: #999999;">-</text>
                        <input class="money" type="number" v-model="form.userWagesHigh" />
                    </view>
                </nova-pref>
            </view>
            <button class="btn-primary" style="margin: 60rpx;" @click="doSubmit">提交</button>
        </view>
    </view>
</template>

<script>
import NovaGrid from '../../components/nova/grid.vue';
import NovaGridItem from '../../components/nova/grid-item.vue';
import NovaPref from '../../components/nova/pref.vue';
import conf from '../../common/conf.js';
import ChooseLocation from './choose-location.vue';

export default {
    components: {
        NovaGrid,
        NovaGridItem,
        NovaPref,
        ChooseLocation
    },
    data() {
        return {
            role: 0,
            index: 0,
            job: undefined,
            areas: [],
            areaIndex: -1,
            info: {},
            places: conf.provinces2,
            form: {
                resume_id: '',
                skill_id: '',
                type: '',
                matching_content: '',
                remarks: '',
                area: '',
                place: '',
                birthday: 0
            },
            loc: {
                latitude: '',
                longitude: '',
                name: '',
                address: '',
                areaid: ''
            }
        };
    },
    created() {
        this.role = this.$global.role;
    },
    methods: {
        change(e) {
            const name = e.target.name;
            let c = this.job.items.find(function(ele) {
                if (ele.key === name) {
                    return ele;
                }
            });
            let arr = [];
            c.options.forEach((item, index) => {
                if (e.detail.choices.indexOf(index) >= 0) {
                    arr.push(item);
                }
            });
            //c.values = e.detail.choices;
            c.value = arr.join(',');
        },
        changeJG(e) {
            this.form.place = this.places[e.detail.value];
            console.log(e, this.form.place);
        },
        changeSex(e) {
            this.form.sex = e.detail.value;
            console.log(this.form.sex);
        },
        changeArea(e) {
            this.areaIndex = e.detail.value;
            this.form.city = this.areas[0].name;
            this.form.area = this.areas[this.areaIndex].name;
        },
        input(e) {
            let k = e.target.name;
            this.form[k] = e.detail.value;
        },
        changePicker(e) {
            let k = e.target.name;
            this.form[k] = e.detail.value;
        },
        goMap(res) {
            console.log(res);
            this.form.village = res.name;
            this.loc = {
                latitude: res.latitude,
                longitude: res.longitude,
                name: res.name,
                address: res.address
            };
            this.form.latitude = res.latitude;
            this.form.longitude = res.longitude;
        },
        async loadData() {
            if (this.form.skill_id) {
                let res = await this.$request.post({
                    url: '/aunt/skillEcho',
                    data: {
                        skill_id: this.form.skill_id
                    }
                });
                this.form = res;
                let temp = JSON.parse(this.form.matching_content).section[0];
                temp.items.forEach(item => {
                    if (item.type === 'range') {
                        let range = item.value ? item.value.split('-') : [0, 0];
                        item.min = range[0];
                        item.max = range[1];
                    } else if (item.type === 'checkbox' || item.type === 'radio') {
                        item.choiceIndices = [];
                        if (item.value) {
                            let tmpvs = item.value.split(',');
                            tmpvs.forEach(temv => {
                                item.choiceIndices.push(item.options.indexOf(temv));
                            });
                        }
                        console.log(item.choiceIndices);
                    }
                });
                if (this.areas) {
                    for (let i = 0; i < this.areas.length; i++) {
                        if (this.areas[i].name === this.form.area) {
                            this.areaIndex = i;
                            break;
                        }
                    }
                }
                this.job = temp;
                console.log('job', this.job);
            } else {
                let res = await this.$request.post({
                    url: '/readJson/readSkillJson',
                    skipInterceptorResponse: true,
                    business: undefined
                });
                console.log(res);
                if (res && res.section) {
                    this.job = res.section[this.index];
                    console.log(this.job);
                }
            }
        },
        async doSubmit() {
            let err = '';
            for (let i = 0; i < this.job.items.length; i++) {
                const item = this.job.items[i];
                if (item.type === 'range') {
                    item.value = `${item.min}-${item.max}`;
                } else if (item.type === 'checkbox' || item.type === 'radio') {
                }
                if (item.require === undefined || item.require) {
                    if (!item.value) {
                        err = item.title;
                        break;
                    }
                }
            }
            if (err) {
                this.$toast(err);
                return;
            }
            console.log(this.form);
            if (this.mutex) {
                return;
            }
            this.mutex = true;
            try {
                if (this.role == 2) {
                    this.form.serviceContent = JSON.stringify({ section: [this.job] });
                    let res = await this.$request.post({
                        url: '/publish/publishShareSave',
                        data: this.form
                    });
                    this.$toast('阿姨分享成功');
                    uni.$emit('yzShareAy');
                    // #ifndef H5
                    setTimeout(function() {
                        uni.navigateBack();
                    }, 500);
                    // #endif
                    return;
                }

                this.form.matching_content = JSON.stringify({ section: [this.job] });
                let res = await this.$request.post({
                    url: '/aunt/skillSave',
                    data: this.form
                });
                console.log('emit skillUpdated');
                uni.$emit('skillUpdated');
                this.$toast(this.form.skill_id ? '技能更新成功' : '技能保存成功');
                // #ifndef H5
                setTimeout(function() {
                    uni.navigateBack();
                }, 500);
                // #endif
            } catch (ex) {
                this.mutex = false;
                this.$toast('发布失败');
            }
        }
    },
    onLoad(options) {
        console.log('onLoad', options);
        this.role = this.$global.role;
        this.areas = this.$global.districts || [];
        if (this.role == 1 || this.role == 3) {
            this.form.skill_id = options.skill_id || '';
            this.form.resume_id = options.resume_id || '';
        } else if (this.role == 2) {
            // #ifdef H5
            if (!this.form.resume_id) {
                this.form.tip = '测试测试';
                this.form.place = '北京';
                this.form.sex = '男';
                this.form.village = '北京东路63号';
                this.form.userName = '业主分享' + Math.ceil(Math.random() * 100000).toString();
                this.form.age = Math.ceil(Math.random() * 100).toString();
                this.form.userPhone = '13912345678';
                this.form.userWagesLow = '3000';
                this.form.userWagesHigh = 3000 + Math.ceil(Math.random() * 1000);
            }
            // #endif
            this.form.birthday = 0;
        }
        let i = options.index;
        // #ifdef H5
        if (i === undefined) {
            i = 0;
        }
        if (!this.form.skill_id) {
            //this.form.skill_id = '7d8082ad528c46638f9ffc32cefecae8';
        }
        // #endif
        this.index = parseInt(i);
        this.form.type = this.index + 1;

        this.loadData();
    }
};
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    background-color: #fcfcfc;
}
.banner {
    width: 100%;
    height: 400rpx;
}
.publish {
    background-color: white;
    border-radius: 10rpx;
    border: 1px solid #f2f2f2;
    box-shadow: 0 0 2rpx #f1f1f1;
    padding: 0 32rpx;
    .border-bottom {
        border-color: #f2f2f2;
        border-style: solid;
        border-width: 0;
        @include thin-border(bottom);
    }
    .job {
        line-height: 95rpx;
        color: $uni-color-primary;
        padding-right: 50rpx;
        font-size: 34rpx;
    }
    .title {
        font-size: 30rpx;
        color: #333333;
        line-height: 95rpx;
    }
    .ta {
        border: 1px solid #ccc;
        border-radius: 10rpx;
        padding: 20rpx 34rpx;
        width: auto;
        height: 180rpx;
        margin-bottom: 60rpx;
    }
    // /deep/ .pref-box {
    //     padding: 0;
    //     height: 96rpx;
    //     margin-top: 34rpx;
    // }
    .grid {
        //flex-wrap: wrap;
        //width: 620rpx;
        .option {
            width: 100%;
            height: 60rpx;
            color: #777;
            font-size: 30rpx;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10rpx;
            border-width: 1rpx;
            //@include thin-border(none);
            border-color: #999;
            border-style: solid;
            padding-left: 4rpx;
            padding-right: 4rpx;
            overflow: hidden;
        }
        input.option {
            width: 180rpx;
            padding-left: 20rpx;
        }
        .checked {
            border: none;
            background-color: $uni-color-primary;
            color: white;
        }
    }

    .money {
        padding: 0 24rpx;
        height: 45rpx;
        line-height: 45rpx;
        border-radius: 4rpx;
        border-style: solid;
        border-color: #999999;
        //@include thin-border(none);
        border-width: 1rpx;
        color: #333333;
        font-size: 30rpx;
        width: 120rpx;
    }
}
</style>
